/* Copyright 2022 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style
 * #scheme=relative
 * #css_wrapper_metadata_end */


/* Style Module that defines color overrides for cr-elements on Chrome OS.

This file plumbs semantic colors from cros_styles.css into cr-elements.

To get Chrome OS System Colors, an element must:
- be beneath a <html> element with a "cros" attribute
- have a <style include="cros-color-overrides"> module in its style module list
- import the following URL in JS/TS
  //resources/cr_elements/chromeos/cros_color_overrides.css.js
*/

:host-context([cros]) a:not(.item)[href] {
  color: var(--cros-link-color);
}

:host-context([cros]) cr-button[has-prefix-icon_],
:host-context([cros]) cr-button[has-suffix-icon_] {
  --iron-icon-fill-color: currentColor;
}

:host-context([cros]) cr-dialog::part(dialog) {
  --cr-dialog-background-color: var(--cros-bg-color-elevation-3);
  background-image: none;
  box-shadow: var(--cros-elevation-3-shadow);
}

:host-context([cros]) cr-radio-button {
  --cr-radio-button-checked-color: var(--cros-radio-button-color);
  --cr-radio-button-checked-ripple-color:
      var(--cros-radio-button-ripple-color);
  --cr-radio-button-unchecked-color:
      var(--cros-radio-button-color-unchecked);
  --cr-radio-button-unchecked-ripple-color:
      var(--cros-radio-button-ripple-color-unchecked);
}

:host-context([cros]) cr-toast {
  --cr-toast-background-color: var(--cros-toast-background-color);
  --cr-toast-background: var(--cros-toast-background-color);
  --cr-toast-text-color: var(--cros-toast-text-color);
  --iron-icon-fill-color: var(--cros-toast-icon-color);
}

:host-context([cros]) cr-toast .error-message {
  color: var(--cros-toast-text-color);
}

:host-context([cros]) cr-toggle {
  --cr-toggle-checked-bar-color: var(--cros-switch-track-color-active);
  /* |--cros-switch-track-color-active| already includes opacity. */
  --cr-toggle-checked-bar-opacity: 100%;
  --cr-toggle-checked-button-color: var(--cros-switch-knob-color-active);
  --cr-toggle-checked-ripple-color: var(--cros-focus-aura-color);
  --cr-toggle-unchecked-bar-color: var(--cros-switch-track-color-inactive);
  --cr-toggle-unchecked-button-color: var(--cros-switch-knob-color-inactive);
  --cr-toggle-unchecked-ripple-color: var(--cros-ripple-color);
  --cr-toggle-box-shadow: var(--cros-elevation-1-shadow);
  --cr-toggle-ripple-diameter: 32px;
}

:host-context([cros]) cr-toggle:focus {
  --cr-toggle-ripple-ring: 2px solid var(--cros-focus-ring-color);
}

:host-context([cros]) .primary-toggle {
  color: var(--cros-text-color-secondary);
}

:host-context([cros]) .primary-toggle[checked] {
  color: var(--cros-text-color-prominent);
}

:host-context([cros]) paper-spinner-lite {
  --paper-spinner-color: var(--cros-icon-color-prominent);
}

:host-context([cros]) cr-tooltip-icon {
  --cr-link-color: var(--cros-tooltip-link-color);
}

/** Jelly-specific styles below */

/** General color overrides */
:host-context(body.jelly-enabled) {
  /* TODO(b/266837484) --cros-* values will be updated globally. Remove these
    definitions after the swap. */
  --cros-button-label-color-primary: var(--cros-sys-on_primary);
  --cros-link-color: var(--cros-sys-primary);
  --cros-separator-color: var(--cros-sys-separator);
  --cros-tab-slider-track-color: var(--cros-sys-surface_variant, 80%);

  --cr-form-field-label-color: var(--cros-sys-on_surface);
  --cr-link-color: var(--cros-sys-primary);
  --cr-primary-text-color: var(--cros-sys-on_surface);
  --cr-secondary-text-color: var(--cros-sys-secondary);
}

/* Button */
:host-context(body.jelly-enabled) cr-button {
  /* Default button colors */
  --text-color: var(--cros-sys-on_primary_container);
  --ink-color: var(--cros-sys-ripple_primary);
  --iron-icon-fill-color: currentColor;
  --hover-bg-color: var(--cros-sys-hover_on_subtle);
  --ripple-opacity: .1;

  /* Action button colors */
  --bg-action: var(--cros-sys-primary);
  --ink-color-action: var(--cros-sys-ripple_primary);
  --text-color-action: var(--cros-sys-on_primary);
  --hover-bg-action: var(--cros-sys-hover_on_prominent);
  --ripple-opacity-action: 1;

  /* Disabled button colors */
  --disabled-bg: var(--cros-sys-disabled_container);
  --disabled-bg-action: var(--cros-sys-disabled_container);
  --disabled-text-color: var(--cros-sys-disabled);

  background-color: var(--cros-sys-primary_container);
  border: none;
}

:host-context(body.jelly-enabled) cr-button:hover::part(hoverBackground) {
  background-color: var(--hover-bg-color);
  display: block;
}

:host-context(body.jelly-enabled) cr-button.action-button {
  background-color: var(--bg-action);
}

:host-context(body.jelly-enabled)
    cr-button.action-button:hover::part(hoverBackground) {
  background-color: var(--hover-bg-action);
}

:host-context(body.jelly-enabled) cr-button[disabled] {
  background-color: var(--cros-sys-disabled_container);
}

:host-context(body.jelly-enabled):host-context(.focus-outline-visible)
    cr-button:focus {
  box-shadow: none;
  outline: 2px solid var(--cros-sys-focus_ring);
}

/* Checkbox */
:host-context(body.jelly-enabled) cr-checkbox {
  --cr-checkbox-checked-box-color: var(--cros-sys-primary);
  --cr-checkbox-ripple-checked-color: var(--cros-sys-ripple_primary);
  --cr-checkbox-checked-ripple-opacity: 1;
  --cr-checkbox-mark-color: var(--cros-sys-inverse_on_surface);
  --cr-checkbox-ripple-unchecked-color: var(--cros-sys-ripple_primary);
  --cr-checkbox-unchecked-box-color: var(--cros-sys-on_surface);
  --cr-checkbox-unchecked-ripple-opacity: 1;
}

/* Dialog */
:host-context(body.jelly-enabled) cr-dialog::part(dialog) {
  --cr-dialog-background-color: var(--cros-sys-base_elevated);
  background-image: none;

  /* TODO(b/266837484) Replace with cros.sys.app-elevation3 when available */
  box-shadow: 0 0 12px 0 var(--cros-sys-shadow);
}

/* Icon button */
:host-context(body.jelly-enabled) cr-icon-button,
:host-context(body.jelly-enabled) cr-link-row::part(icon),
:host-context(body.jelly-enabled) cr-expand-button::part(icon) {
  --cr-icon-button-fill-color: var(--cros-sys-secondary);
}

/* Input and Textarea */
:host-context(body.jelly-enabled) cr-input,
:host-context(body.jelly-enabled) cr-search-field::part(searchInput),
:host-context(body.jelly-enabled) cr-textarea {
  --cr-input-background-color: var(--cros-sys-input_field_on_base);
  --cr-input-error-color: var(--cros-sys-error);
  --cr-input-focus-color: var(--cros-sys-primary);
  --cr-input-placeholder-color: var(--cros-sys-secondary);
}

/* md-select */
:host-context(body.jelly-enabled) .md-select {
  --md-select-bg-color: var(--cros-sys-input_field_on_base);
  --md-select-focus-shadow-color: var(--cros-sys-primary);
  --md-select-option-bg-color: var(--cros-sys-base_elevated);
  --md-select-text-color: var(--cros-sys-on_surface);
}

/* Radio button */
:host-context(body.jelly-enabled),
:host-context(body.jelly-enabled) cr-radio-button {
  --cr-radio-button-checked-color: var(--cros-sys-primary);
  --cr-radio-button-checked-ripple-color: var(--cros-sys-ripple_primary);
  --cr-radio-button-unchecked-color: var(--cros-sys-on_surface);
  --cr-radio-button-unchecked-ripple-color:
      var(--cros-sys-ripple_neutral_on_subtle);
}

:host-context(body.jelly-enabled) cr-card-radio-button {
  --cr-card-background-color: var(--cros-sys-app_base);
  --cr-checked-color: var(--cros-sys-primary);
  --cr-radio-button-checked-ripple-color: var(--cros-sys-ripple_primary);
  --hover-bg-color: var(--cros-sys-hover_on_subtle);
}

/* Search field */
:host-context(body.jelly-enabled) cr-search-field {
  --cr-search-field-clear-icon-fill: var(--cros-sys-primary);
  --cr-search-field-clear-icon-margin-end: 6px;
  --cr-search-field-input-border-bottom: none;
  --cr-search-field-input-padding-start: 8px;
  --cr-search-field-input-underline-border-radius: 4px;
  --cr-search-field-search-icon-display: none;
  --cr-search-field-search-icon-fill: var(--cros-sys-primary);
  --cr-search-field-search-icon-inline-display: block;
  --cr-search-field-search-icon-inline-margin-start: 6px;
  border-radius: 4px;
}

/* Slider */
:host-context(body.jelly-enabled) cr-slider {
  --cr-slider-active-color: var(--cros-sys-primary);
  --cr-slider-container-color: var(--cros-sys-primary_container);
  --cr-slider-container-disabled-color: var(--cros-sys-disabled_container);
  --cr-slider-disabled-color: var(--cros-sys-disabled);
  --cr-slider-knob-active-color: var(--cros-sys-primary);
  --cr-slider-knob-disabled-color: var(--cros-sys-disabled);
  --cr-slider-marker-active-color: var(--cros-sys-primary_container);
  --cr-slider-marker-color: var(--cros-sys-primary);
  --cr-slider-marker-disabled-color: var(--cros-sys-disabled);
  --cr-slider-ripple-color: var(--cros-sys-hover_on_prominent);
}

:host-context(body.jelly-enabled) cr-slider:not([disabled])::part(knob) {
  background-color: var(--cros-sys-primary);
}

:host-context(body.jelly-enabled) cr-slider[disabled]::part(knob) {
  border: none;
}

:host-context(body.jelly-enabled) cr-slider::part(label) {
  background: var(--cros-sys-primary);
  color: var(--cros-sys-on_primary);
}

/* Tabs */
:host-context(body.jelly-enabled) cr-tabs {
  --cr-tabs-selected-color: var(--cros-sys-primary);
}

/* Toggle */
:host-context(body.jelly-enabled) cr-toggle {
  --cr-toggle-checked-bar-color: var(--cros-sys-primary_container);
  --cr-toggle-checked-bar-opacity: 100%;
  --cr-toggle-checked-button-color: var(--cros-sys-primary);
  --cr-toggle-checked-ripple-color: var(--cros-sys-hover_on_prominent);
  --cr-toggle-unchecked-bar-color: var(--cros-sys-secondary);
  --cr-toggle-unchecked-button-color: var(--cros-sys-on_secondary);
  --cr-toggle-unchecked-ripple-color: var(--cros-sys-hover_on_prominent);
  /* TODO(b/266837484) Replace with cros.sys.app-elevation1 when available */
  --cr-toggle-box-shadow: var(--cros-elevation-1-shadow);
  --cr-toggle-ripple-diameter: 32px;
}

:host-context(body.jelly-enabled) cr-toggle:focus {
  --cr-toggle-ripple-ring: 2px solid var(--cros-sys-focus_ring);
}
